<template>
	<view class="content">
		<view class="wxfengxiang">
			<!-- 转发为小程序转发,其他端需自行更换 -->
			<view class="">示例-按钮分享 为小程序转发</view>
			<button open-type="share" type="primary">分享朋友</button>
			<view class="">示例-生成海报</view>
			<button type="primary" @click="getImage">生成海报</button>
		</view>
		<!-- 生成二维码 -->
		<canvas class="canvas-code" canvas-id="myQrcode" />
	</view>
</template>

<script>
	var web = require('../utils/request.js');
	export default {
		props: ['fxinfo'],
		data() {
			return {
				userInfo: {},
				qrcode: '',
				info: {},
				bgimg: '',
				fxShow: false,
				userImg: ''
			}
		},
		watch: {
			'fxinfo': { //监听数据变化
				handler(newVal) {
					this.info = this.fxinfo;
					this.userImg = this.info.headerImg;
					if (this.info.isshow) {
						// this.getEwm();//获取二维码
					}
				},
				deep: true,
				immediate: true,
			}
		},
		mounted() {},
		methods: {
			getImage() { //批量获取图片信息
				var that = this;
				let bgimg = new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: '/r/cms/www/zujianku/haibao/hb-hbbj.png',
						success: res => resolve(res)
					})
				})
				let qrcode = new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: '/r/cms/www/zujianku/haibao/hb-erweima.png',
						success: res => resolve(res)
					})
				})
				let userImg = new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: that.userImg,
						success: res => resolve(res)
					})
				})
				let logo = new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: '/r/cms/www/zujianku/haibao/hb-logo.png',
						success: res => resolve(res)
					})
				})
				let typeImage = new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: that.info.typeImg,
						success: res => resolve(res)
					})
				})
				Promise.all(
					[qrcode, userImg, logo, typeImage, bgimg]
				).then(res => {
					console.log(res)
					var shareInfo = {
						qrcode: res[0].path,
						headerImg: res[1].path,
						logo: res[2].path,
						typeImg: res[3].path,
						bgimg: res[4].path,
						userName: that.info.userName,
						name: that.info.name,
						salePrice: that.info.salePrice,
						des: that.info.des
					}
					uni.$emit('schb', { //全部信息获取成功,全局事件传递生成海报
						json: JSON.stringify(shareInfo),
						show: true
					})
				}).catch(error => {

				})
			}
		}
	}
</script>

<style>
	.fxtc-lists-txt {
		font-size: 28upx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.t4 {
		background: rgba(223, 162, 107, 1);
	}

	.t3 {
		background: rgba(57, 160, 212, 1);
	}

	.t2 {
		background: rgba(88, 171, 63, 1);
	}

	.t1 {
		background: rgba(67, 157, 109, 1);
	}

	.fxtc-lists-t image {
		width: 44upx;
		height: 44upx;
		margin: 28upx auto;
	}

	.fxtc-lists-t {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
	}

	.fxtc-title {
		width: 750upx;
		font-size: 28upx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		margin-top: 39upx;
	}

	.fxtc-list {
		width: 700upx;
		display: flex;
		margin: 42upx auto;
		text-align: center;
		justify-content: space-between;
	}

	button {
		padding: 0;
	}

	.fxpy1 image {
		width: 46upx;
		height: 46upx;
	}

	.fxpy1 {
		text-align: center;
		cursor: pointer;
		font-size: 20upx;
	}

	.fxpy image {
		width: 46upx;
		height: 46upx;
	}

	.fxpy-txt {
		color: #999999;
		font-size: 22upx;
	}

	.fxpy {
		margin-right: 38upx;
		text-align: center;
		cursor: pointer;
		background: rgba(0, 0, 0, 0);
		width: auto;
		height: auto;
		line-height: normal;
		font-size: 20upx;
	}

	.wxfengxiang {
		text-align: center;
	}

	.mask {
		background: rgba(0, 0, 0, 0.5);
		width: 750upx;
		height: 100%;
		z-index: 9;
		position: fixed;
		top: 0;
		left: 0;
	}

	.fxtc {
		width: 750upx;
		height: 584upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20upx 20upx 0px 0px;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
	}

	.canvas-code {
		background: #fff;
		width: 200px;
		height: 200px;
		position: absolute;
		top: -10000upx;
	}

	.fengxiang {
		cursor: pointer;
		width: 122upx;
		line-height: 48upx;
		text-align: center;
		height: 48upx;
		background: rgba(238, 238, 238, 1);
		border-radius: 24upx 0px 0px 24upx;
		position: absolute;
		font-size: 24upx;
		color: #999999;
		top: 45upx;
		right: 0upx;
	}

	.fengxiang image {
		width: 24upx;
		height: 24upx;
		margin-right: 5upx;
		position: relative;
		top: 4upx;
	}
</style>
